<template>
    <div class='editDev'>
        <div class='dev_btns'>
            选择按钮
            <select v-model="filepath" style="flex:1">
                <option :value="item.filename" v-for="(item,index) in buttonJsons" :key="index">{{item.buttonName}}</option>
            </select>
        </div>
        <div class='dev_title' style="width:100%;padding:10px;background:rgba(0,0,0,0.5);display:flex;flex-direction:row;">
            <div>
                <el-button type="primary" @click="openJson" style="border-radius:0">界面json</el-button>
                <el-dropdown>
                    <el-button type="primary"  style="border-radius:0">
                        {{views}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown" >
                        <el-dropdown-item @click.native="openInfo">基础信息</el-dropdown-item>
                        <el-dropdown-item @click.native="openBtn">按钮</el-dropdown-item>
                        <el-dropdown-item @click.native="openView">界面</el-dropdown-item>
                        <el-dropdown-item @click.native="openRead">读取后台</el-dropdown-item>
                        <el-dropdown-item @click.native="">保存后台</el-dropdown-item>
                        <el-dropdown-item @click.native="">删除后台</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

                <el-button type="primary" @click="resetDevOps"  style="border-radius:0">重置</el-button>
            </div>
            <div style="flex:1;text-align:right">
                <el-button type="primary" @click="returnView" v-if="showViewChild2&&!showViewChild3"  style="border-radius:0">返回</el-button>
                <el-button type="primary" @click="returnView2" v-if="showViewChild3"  style="border-radius:0">返回</el-button>
                <el-button type="primary" @click="saveJson"  style="border-radius:0">保存</el-button>
            </div>
        </div>
        <div class='dev_content' style="overflow:hidden">
            <div v-if="showView" style="height:100%;display:flex;flex-direction:column">
                <div class='dev_btns'>
                    json文件
                    <select v-model="mainJsonView" style="flex:1">
                        <option :value="item" v-for="(item,index) in mainInfo" :key="index">{{item}}</option>
                    </select>
                </div>
                <vue-json-editor
                    v-model="data[mainJsonView]"
                    :showBtns="false"
                    :mode="'code'"
                    lang="zh"  
                    :expandedOnStart="false"  
                    style="width:100%;flex:1"
                    />
            </div>
            <div v-if="showView2" style="height:100%;display:flex;flex-direction:column"  class="devContentChild">
                <t-module-form
                   
                :formOpts="formOpts"
                />
            </div>
            <div v-if="showView3" style="height:100%;display:flex;flex-direction:column"  class="devContentChild">
                <div style="overflow:auto">
                    <t-table
                        
                        :table="btnTable"
                        :columns="btnTableColumns"
                        isRowSort
                        row-key="name"
                        
                        @rowSort="btnRowSort"
                    />
                    <t-module-form
                    
                    :formOpts="btnFormOpts"
                        style="margin-bottom:5px;flex-grow:0;height:auto;overflow:hidden"
                    />
                <template v-if="showBtnChild">

                        <div class='showBtnTable'>
                            <div class='showBtnTableTitle'>显示条件<input type='button' value='新增行' style='float:right' @click="addBtnShowRow"/></div>
                            <table style="width:100%;border-collapse:collapse;" cellpadding="0" spacingpadding="0">
                                <colgroup>
                                    <col/>
                                    <col/>
                                    <col/>
                                    <col/>
                                </colgroup>
                                <tr >
                                    <td>字段</td>
                                    <td>操作符</td>
                                    <td>值</td>
                                    <td>操作</td>
                                </tr>
                                <tr v-for="(item,index) in btnShowData" :key="index">
                                    <td><input type='text' style='border:0;width:100%' v-model="item.key"/></td>
                                    <td><input type='text' style='border:0;width:100%'  v-model="item.opr"/></td>
                                    <td><input type='text' style='border:0;width:100%'  v-model="item.val"/></td>
                                    <td><input type='button' value='删除'  @click="delBtnShowRow(index)"/></td>
                                </tr>
                            </table>
                        </div>

                        <div class='showBtnTable'>
                            <div class='showBtnTableTitle'>提示信息显示条件<input type='button' value='新增行' style='float:right' @click="addBtnMsgShowRow"/></div>
                            <table style="width:100%;border-collapse:collapse;" cellpadding="0" spacingpadding="0">
                                <colgroup>
                                    <col/>
                                    <col/>
                                    <col/>
                                    <col/>
                                </colgroup>
                                <tr >
                                    <td>字段</td>
                                    <td>操作符</td>
                                    <td>值</td>
                                    <td>操作</td>
                                </tr>
                                <tr v-for="(item,index) in btnMsgShowData" :key="index">
                                    <td><input type='text' style='border:0;width:100%' v-model="item.key"/></td>
                                    <td><input type='text' style='border:0;width:100%'  v-model="item.opr"/></td>
                                    <td><input type='text' style='border:0;width:100%'  v-model="item.val"/></td>
                                    <td><input type='button' value='删除'  @click="delBtnMsgShowRow(index)"/></td>
                                </tr>
                            </table>
                        </div>

                        <div class='showBtnTable'>
                            <div class='showBtnTableTitle'>打印二级菜单<input type='button' value='新增行' style='float:right' @click="addBtnPrintRow"/></div>
                            <table style="width:100%;border-collapse:collapse;" cellpadding="0" spacingpadding="0">
                                <colgroup>
                                    <col/>
                                    <col/>
                                    <col/>
                                    <col/>
                                </colgroup>
                                <tr >
                                    <td>按钮名称</td>
                                    <td>打印主键</td>
                                    <td>exkey</td>
                                    <td>操作</td>
                                </tr>
                                <tr v-for="(item,index) in btnPrintData" :key="index">
                                    <td><input type='text' style='border:0;width:100%' v-model="item.name"/></td>
                                    <td><input type='text' style='border:0;width:100%'  v-model="item.printKey"/></td>
                                    <td><input type='text' style='border:0;width:100%'  v-model="item.exkey"/></td>
                                    <td><input type='button' value='删除'  @click="delBtnPrintRow(index)"/></td>
                                </tr>
                            </table>
                        </div>


                </template>
                </div>
                
            </div>

            <div v-if="showView4" style="height:100%;display:flex;flex-direction:column"  class="devContentChild">
                <div style="overflow:auto" v-show="showViewChild4">
                    <t-table
                        
                        :table="viewTable"
                        :columns="viewTableColumns"
                        isRowSort
                        row-key="name"
                        
                        @rowSort="viewRowSort"
                    />
                    <template v-if="showViewChild">
                        <t-module-form
                    
                        :formOpts="viewFormOpts"
                            style="margin-bottom:5px;flex-grow:0;height:auto;overflow:hidden"
                        />
                        <div class='showBtnTableTitle'>选项卡明细<input type='button' value='新增行' style='float:right' @click="addViewDetail"/></div>
                        <t-table
                            
                            :table="viewDetailTable"
                            :columns="viewDetailTableColumns"
                            isRowSort
                            row-key="name"
                            
                            @rowSort="viewDetailRowSort"
                        />
                    </template>

                   
                   
                  
                </div>
                <div style="overflow:auto" v-if="!showViewChild4&&!showViewChild3">
                    <template v-if="showViewChild2">
                        <t-module-form
                        
                        :formOpts="viewFormOpts2"
                            style="margin-bottom:5px;flex-grow:0;height:auto;overflow:hidden"
                        />
                        <div class='showBtnTableTitle'>界面明细<input type='button' value='新增行' style='float:right' @click="addViewDetail2"/></div>
                        <t-table
                            
                            :table="viewDetailTable2"
                            :columns="viewDetailTableColumns2"
                            isRowSort
                            row-key="name"
                            
                            maxHeight="360"
                            @rowSort="viewDetailRowSort2"
                        />
                   </template>
                   
                </div>
               
                <div style="overflow:auto"  v-if="showViewChild3">
                        <t-module-form
                        
                        :formOpts="viewFormFieldOpts"
                            style="margin-bottom:5px;flex-grow:0;height:auto;overflow:hidden"
                        />
                </div>
            </div>
            <!--读取后台-->
            <div v-if="showView5" style="height:100%;display:flex;flex-direction:column"  class="devContentChild">
                <div style="overflow:auto">
                    <t-table
                        
                        :table="readTable"
                        :columns="readTableColumns"
                        isRowSort
                        row-key="name"
                        
                        @rowSort="readRowSort"
                        
                    />

                    <template v-if="showViewChild5">
                        <t-module-form
                    
                        :formOpts="readFormOpts"
                            style="margin-bottom:5px;flex-grow:0;height:auto;overflow:hidden"
                        />
                        <t-table
                            
                            :table="readSqlTable"
                            :columns="readSqlTableColumns"
                            isRowSort
                            row-key="name"
                            
                            maxHeight="360"
                            @rowSort="readSqlRowSort"
                        />
                    </template>
                    <template v-if="showViewChild6">
                        <t-module-form
                    
                        :formOpts="readSqlFormOpts"
                            style="margin-bottom:5px;flex-grow:0;height:auto;overflow:hidden"
                        >
                        <template #material>
                            <el-button size="small" type="success" @click="readEdit2">特殊字段</el-button>
                           
                        </template>
                        </t-module-form>
                    </template>
                    <template v-if="showViewChild7">
                        <t-table
                            
                            :table="readSqlTable2"
                            :columns="readSqlTableColumns2"
                            
                            row-key="id"
                            
                            maxHeight="360"
                        />
                    </template>
                    <template v-if="showViewChild8">
                        <t-module-form
                    
                        :formOpts="readFormOpts2"
                            style="margin-bottom:5px;flex-grow:0;height:auto;overflow:hidden"
                        />
                    </template>
                  
                </div>
            </div>

        </div>

       
    </div>
</template>
<script>
import Vue  from 'vue'
import { codemirror } from 'vue-codemirror'
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

import vueJsonEditor from 'vue-json-editor'
import sqlFormatter from "sql-formatter";
export default { 
    name:"listDev",
    props:["company","buttonJson","isDevOps"],
    components: {
        codemirror,
        vueJsonEditor
    },
    data(){
        return{
            filepath:"",
            buttonJsons:[],
            views:"界面编辑",
            showView:true,
            showView2:false,
            showView3:false,
            showView4:false,
            showView5:false,
            showBtnChild:false,
            showViewChild:false,
            showViewChild2:false,
            showViewChild3:false,
            showViewChild4:true,
            showViewChild5:false,
            showViewChild6:false,
            showViewChild7:false,
            showViewChild8:false,
            viewDetailId:"",
            mainInfo:[],
            mainJsonView:"main",
            data:{},
            formOpts:{
                mainInfo: {
                    title: '基础信息',
                    name: 'mainInfo',
                    ref: null,
                    opts: {
                        formData: {
                            mainPath:"",
                            companys:"",
                            tables:"",
                            sizes:"",
                            lefts:"",
                            tops:"",
                            model:"",
                            modelId:""

                        },
                        fieldList: [
                            { label: '路径', value: 'mainPath', type: 'input', comp: 'el-input', widthSize: 1 },
                            { label: '所属单位', value: 'companys', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '所需表', value: 'tables', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '窗口大小', value: 'sizes', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: 'left', value: 'lefts', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: 'top', value: 'tops', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: 'model', value: 'model', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: 'modelId', value: 'modelId', type: 'input', comp: 'el-input', widthSize: 2 }
                        ]
                    }
                }
            },
            btnTable:{
                operator: [
                    
                    {
                        text: '编辑',
                        type: 'primary',
                        fun: this.btnEdit
                    },
                    {
                        text: '删除',
                        type: 'danger',
                        fun: this.btnDel
                        
                    }
                    ],
                    // 操作列样式
                    operatorConfig: {
                        fixed: 'right', // 固定列表右边（left则固定在左边）
                        width: 120,
                        label: '操作'
                    }
            },
            btnTableColumns:[
                { prop: 'name', label: '按钮名称', minWidth: '100' ,fixed:'left'},
                { prop: 'type', label: '类型', minWidth: '150' },
                { prop: 'url', label: '后台url', minWidth: '260' },
                { prop: 'id', label: '页面元素id', minWidth: '100' },
                { prop: 'filename', label: '文件路径', minWidth: '100' },
                { prop: 'msg', label: '提示语', minWidth: '100' },
                { prop: 'printKey', label: '打印key', minWidth: '100' },
                { prop: 'group', label: '权限组别', minWidth: '100' }
               
            ],
            btnFormOpts:{
                btnInfo: {
                    title: '按钮信息',
                    name: 'btnInfo',
                    ref: null,
                    opts: {
                        formData: {
                            name:"",
                            type:"",
                            url:"",
                            id:"",
                            msg:"",
                            filename:"",
                            printKey:"",
                            group:""

                        },
                        fieldList: [
                            { label: '按钮名称', value: 'name', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '类型', value: 'type', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '后台url', value: 'url', type: 'input', comp: 'el-input', widthSize: 1 },
                            { label: '页面元素id', value: 'id', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '提示语', value: 'msg', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '文件路径', value: 'filename', type: 'input', comp: 'el-input', widthSize: 1 },
                            { label: '打印key', value: 'printKey', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '权限组别', value: 'group', type: 'input', comp: 'el-input', widthSize: 2 }
                        ]
                    }
                }
            },
           btnShowData:[],
           btnMsgShowData:[],
           btnPrintData:[],
           viewTable:{
                operator: [
                    
                    {
                        text: '编辑',
                        type: 'primary',
                        fun: this.viewEdit
                    },
                    {
                        text: '删除',
                        type: 'danger',
                        fun: this.viewDel
                        
                    }
                    ],
                    // 操作列样式
                    operatorConfig: {
                        fixed: 'right', // 固定列表右边（left则固定在左边）
                        width: 120,
                        label: '操作'
                    }
            },
            viewTableColumns:[
                { prop: 'tabName', label: '选项卡名称', minWidth: '100' ,fixed:'left'},
                { prop: 'isClose', label: '保存后是否关闭', minWidth: '150' },
                { prop: 'type', label: '类型', minWidth: '260' },
                { prop: 'isScroll', label: '内容超出滚动（Y/N', minWidth: '100' }
               
            ],
            viewFormOpts:{
                viewInfo: {
                    title: '选项卡信息',
                    name: 'viewInfo',
                    ref: null,
                    opts: {
                        formData: {
                            tabName:"",
                            isClose:"",
                            type:"",
                            isScroll:""

                        },
                        fieldList: [
                            { label: '选项卡名称', value: 'tabName', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '保存后是否关闭', value: 'isClose', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '类型', value: 'type', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '内容超出滚动（Y/N', value: 'isScroll', type: 'input', comp: 'el-input', widthSize: 2 }
                        ]
                    }
                }
            },
            viewDetailTable:{
                operator: [
                    
                    {
                        text: '编辑',
                        type: 'primary',
                        fun: this.viewDetailEdit
                    },
                    {
                        text: '删除',
                        type: 'danger',
                        fun: this.viewDetailDel
                        
                    }
                    ],
                    // 操作列样式
                    operatorConfig: {
                        fixed: 'right', // 固定列表右边（left则固定在左边）
                        width: 120,
                        label: '操作'
                    }
            },
            viewDetailTableColumns:[
                { prop: 'title', label: 'title', minWidth: '100' ,fixed:'left'},
                { prop: 'path', label: '文件路径', minWidth: '150' },
                { prop: 'width', label: '宽度', minWidth: '100' },
                { prop: 'height', label: '高度', minWidth: '100' },
                { prop: 'id', label: 'id', minWidth: '100' },
                { prop: 'type', label: '类型', minWidth: '100' },
                { prop: 'dataField', label: '后台key', minWidth: '100' },
                { prop: 'exkey', label: 'exkey', minWidth: '100' },
                { prop: 'extype', label: 'extype', minWidth: '100' },
                { prop: 'expost', label: 'url路径', minWidth: '100' }
               
            ],
            viewFormOptsFormData:null,
            viewFormOpts2:{
                viewInfoEdit: {
                    title: '选项卡编辑',
                    name: 'viewInfoEdit',
                    ref: null,
                    opts: {
                        formData: {
                            title:"",
                            id:"",
                            path:"",
                            width:"",
                            height:"",
                            type:"",
                            dataField:"",
                            exkey:"",
                            extype:"",
                            expost:""

                        },
                        fieldList: [
                            { label: 'title', value: 'title', type: 'input', comp: 'el-input', widthSize: 4, formItemBind: { labelWidth: "70px" } },
                            { label: 'id', value: 'id', type: 'input', comp: 'el-input', widthSize: 4 , formItemBind: { labelWidth: "70px" }},
                            { label: 'type', value: 'type', type: 'input', comp: 'el-input', widthSize: 4 , formItemBind: { labelWidth: "70px" }},
                            { label: 'width', value: 'width', type: 'input', comp: 'el-input', widthSize: 4 , formItemBind: { labelWidth: "70px" }},
                            { label: '文件路径', value: 'path', type: 'input', comp: 'el-input', widthSize: 1 , formItemBind: { labelWidth: "70px" }},
                            { label: 'height', value: 'height', type: 'input', comp: 'el-input', widthSize: 4 , formItemBind: { labelWidth: "70px" }},
                            { label: '后台key', value: 'dataField', type: 'input', comp: 'el-input', widthSize: 4, formItemBind: { labelWidth: "70px" } },
                            { label: 'extype', value: 'extype', type: 'input', comp: 'el-input', widthSize: 4 , formItemBind: { labelWidth: "70px" }},
                            { label: 'expost', value: 'expost', type: 'input', comp: 'el-input', widthSize: 4, formItemBind: { labelWidth: "70px" } },
                            { label: 'exkey', value: 'exkey', type: 'input', comp: 'el-input', widthSize: 1, formItemBind: { labelWidth: "70px" } }
                        ]
                    }
                }
            },
            viewFormOptsFormData2:null,
            viewDetailTable2:{
                operator: [
                    
                    {
                        text: '编辑',
                        type: 'primary',
                        fun: this.viewDetailEdit2
                    },
                    {
                        text: '删除',
                        type: 'danger',
                        fun: this.viewDetailDel2
                        
                    }
                    ],
                    // 操作列样式
                    operatorConfig: {
                        fixed: 'right', // 固定列表右边（left则固定在左边）
                        width: 120,
                        label: '操作'
                    }
            },
            viewDetailTableColumns2:[
                { prop: 'label', label: '名称', minWidth: '100' ,fixed:'left'},
                { prop: 'pre', label: '前端key', minWidth: '150' },
                { prop: 'id', label: '字段名', minWidth: '100' },
                { prop: 'type', label: '类型', minWidth: '100' },
                { prop: 'width', label: '宽度', minWidth: '100' },
                { prop: 'labelStyle', label: '名称样式', minWidth: '100' },
                { prop: 'labelWidth', label: '名称宽度', minWidth: '100' },
                { prop: 'isReadOnly', label: '是否只读', minWidth: '100' },
                { prop: 'maps', label: '下拉框显示的内容', minWidth: '100' },
                { prop: 'vals', label: '下拉框显示的内容对应的值', minWidth: '100' },
                { prop: 'dataSource', label: '下拉框源', minWidth: '100' },              
                { prop: 'required', label: '是否必填项', minWidth: '100' },
                { prop: 'fontSize', label: '字体大小', minWidth: '100' },
                { prop: 'extype', label: '额外的类型', minWidth: '100' },
                { prop: 'exkey', label: 'exkey', minWidth: '100' },
                { prop: 'height', label: '高度', minWidth: '100' },
                { prop: 'valsql', label: '下拉框sql', minWidth: '100' },
                { prop: 'sql', label: '远程下拉框sql', minWidth: '100' },
                { prop: 'postUrl', label: '下拉框url', minWidth: '100' },
                { prop: 'show', label: '父下拉框值', minWidth: '100' },
                { prop: 'clickEvent', label: '点击事件', minWidth: '100' },
                { prop: 'clickKey', label: '事件参数', minWidth: '100' },
                { prop: 'exkey2', label: '必填参数', minWidth: '100' },
                { prop: 'exkey3', label: '字段参数', minWidth: '100' },
                { prop: 'msg', label: '必填错误信息', minWidth: '100' },
                { prop: 'index', label: 'index', minWidth: '100' }
               
            ],
            viewFormFieldOpts:{
                viewInfoField: {
                    title: '字段编辑',
                    name: 'viewInfoField',
                    ref: null,
                    opts: {
                        formData: {
                            label:"",
                            pre:"",
                            id:"",
                            type:"",
                            width:"",
                            labelStyle:"",
                            labelWidth:"",
                            isReadOnly:"",
                            maps:"",
                            vals:"",
                            dataSource:"",
                            required:"",
                            fontSize:"",
                            extype:"",
                            exkey:"",
                            height:"",
                            valsql:"",
                            sql:"",
                            postUrl:"",
                            show:"",
                            clickEvent:"",
                            clickKey:"",
                            exkey2:"",
                            exkey3:"",
                            msg:"",
                            index:""

                        },
                        fieldList: [
                            { label: '名称', value: 'label', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '前端key', value: 'pre', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '字段名', value: 'id', type: 'input', comp: 'el-input', widthSize: 1 },
                            { label: '类型', value: 'type', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '宽度', value: 'width', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '名称样式', value: 'labelStyle', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '名称宽度', value: 'labelWidth', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '是否只读', value: 'isReadOnly', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '下拉框显示的内容', value: 'maps', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '下拉框显示的内容对应的值', value: 'vals', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '下拉框源', value: 'dataSource', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '是否必填项', value: 'required', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '字体大小', value: 'fontSize', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '额外的类型', value: 'extype', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: 'exkey', value: 'exkey', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '高度', value: 'height', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '下拉框sql', value: 'valsql', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '远程下拉框sql', value: 'sql', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '下拉框url', value: 'postUrl', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '父下拉框值', value: 'show', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '点击事件', value: 'clickEvent', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '事件参数', value: 'clickKey', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '必填参数', value: 'exkey2', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '字段参数', value: 'exkey3', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '必填错误信息', value: 'msg', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: 'index', value: 'index', type: 'input', comp: 'el-input', widthSize: 2 }
                          
                        ]
                    }
                }
            },
            readTable:{
                operator: [
                    
                    {
                        text: '编辑',
                        type: 'primary',
                        fun: this.readEdit
                    },
                    {
                        text: '删除',
                        type: 'danger',
                        fun: this.readlDel
                        
                    }
                    ],
                    // 操作列样式
                    operatorConfig: {
                        fixed: 'right', // 固定列表右边（left则固定在左边）
                        width: 120,
                        label: '操作'
                    }
            },
            readTableColumns:[
                { prop: 'pre', label: '前端key', minWidth: '100' ,fixed:'left'},
                { prop: 'isArray', label: '是否是集合', minWidth: '150' },
                { prop: 'key', label: '主键', minWidth: '100' },
                { prop: 'dataType', label: '类型', minWidth: '100' }
               
            ],
            readFormOpts:{
                readInfo: {
                    title: '读取后台编辑',
                    name: 'readInfo',
                    ref: null,
                    opts: {
                        formData: {
                            
                            pre:"",
                            isArray:"",
                            key:"",
                            dataType:""
                        },
                        fieldList: [
                            { label: '前端key', value: 'pre', type: 'input', comp: 'el-input', widthSize: 4 , formItemBind: { labelWidth: "70px" }},
                            { label: '集合', value: 'isArray', type: 'input', comp: 'el-input', widthSize: 4 , formItemBind: { labelWidth: "70px" }},
                            { label: '主键', value: 'key', type: 'input', comp: 'el-input', widthSize: 4 , formItemBind: { labelWidth: "70px" }},
                            { label: '类型', value: 'dataType', type: 'input', comp: 'el-input', widthSize: 4 , formItemBind: { labelWidth: "70px" }}
                          
                        ]
                    }
                }
            },
            readSqlTable:{
                operator: [
                    
                    {
                        text: '编辑',
                        type: 'primary',
                        fun: this.readSqlEdit
                    },
                    {
                        text: '删除',
                        type: 'danger',
                        fun: this.readSqllDel
                        
                    }
                    ],
                    // 操作列样式
                    operatorConfig: {
                        fixed: 'right', // 固定列表右边（left则固定在左边）
                        width: 120,
                        label: '操作'
                    }
            },
            readSqlTableColumns:[
                { prop: 'sql', label: 'sql', minWidth: '100' ,fixed:'left'},
                { prop: 'params', label: 'sql查询条件', minWidth: '150' },
                { prop: 'isRequest', label: '查询条件是否前台传入', minWidth: '100' },
                { prop: 'isnull', label: '前端条件是否可为空', minWidth: '100' },
                { prop: 'path', label: '特殊字段处理路径', minWidth: '100' },
                { prop: 'isArray', label: '是否是集合', minWidth: '100' }
               
            ],
            readSqlTable2:{
                operator: [
                    
                    {
                        text: '编辑',
                        type: 'primary',
                        fun: this.readSqlEdit2
                    },
                    {
                        text: '删除',
                        type: 'danger',
                        fun: this.readSqllDel2
                        
                    }
                    ],
                    // 操作列样式
                    operatorConfig: {
                        fixed: 'right', // 固定列表右边（left则固定在左边）
                        width: 120,
                        label: '操作'
                    }
            },
            readSqlTableColumns2:[
                { prop: 'id', label: '字段名', minWidth: '100' ,fixed:'left'},
                { prop: 'val', label: '默认值', minWidth: '80' },
                { prop: 'isCover', label: '默认值是否覆盖原值', minWidth: '100' },
                { prop: 'isSave', label: '不修改是否保存', minWidth: '100' },
                { prop: 'type', label: '类型', minWidth: '100' }
               
            ],
            readFormOpts2:{
                readFieldInfo: {
                    title: '特殊字段编辑',
                    name: 'readFieldInfo',
                    ref: null,
                    opts: {
                        formData: {
                            
                            pre:"",
                            isArray:"",
                            key:"",
                            dataType:""
                        },
                        fieldList: [
                            { label: '字段名', value: 'id', type: 'input', comp: 'el-input', widthSize: 2 , formItemBind: { labelWidth: "140px" }},
                            { label: '默认值', value: 'val', type: 'input', comp: 'el-input', widthSize: 2 , formItemBind: { labelWidth: "140px" }},
                            { label: '默认值是否覆盖原值', value: 'isCover', type: 'input', comp: 'el-input', widthSize: 2 , formItemBind: { labelWidth: "140px" }},
                            { label: '不修改是否保存', value: 'isSave', type: 'input', comp: 'el-input', widthSize: 2 , formItemBind: { labelWidth: "140px" }},
                            { label: '类型', value: 'type', type: 'input', comp: 'el-input', widthSize: 2, formItemBind: { labelWidth: "140px" }}
                          
                        ]
                    }
                }
            },
            readSqlFormOpts:{
                readSqlInfo: {
                    title: '读取后台SQL',
                    name: 'readSqlInfo',
                    btn: 'material',
                    disabled:true,
                    ref: null,
                    opts: {
                        formData: {
                            sql:"",
                            params:"",
                            isRequest:"",
                            isnull:"",
                            path:"",
                            isArray:""

                        },
                        fieldList: [
                            { label: 'sql', value: 'sql', type: 'input', comp: 'el-input', widthSize: 1},
                            { label: 'sql查询条件', value: 'params', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '特殊字段处理路径', value: 'path', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '查询条件前台传入', value: 'isRequest', type: 'input', comp: 'el-input', widthSize: 2 },
                            { label: '前端条件可为空', value: 'isnull', type: 'input', comp: 'el-input', widthSize: 2},
                            { label: '是否是集合', value: 'isArray', type: 'input', comp: 'el-input', widthSize: 2 },
                        ]
                    }
                }
            },
        }
    },
    created(){
        this.buttonJson.forEach(item=>{
            let filename=item.filename;
            let size=filename.length;
            if(filename!="殡仪馆系统/"&&filename!="公墓系统/"){
                this.buttonJsons.push(item);
                if(!this.filepath){
                    this.filepath=filename;
                   
                }
            }
        })
    },
    methods:{
        openJson(){
            this.closes();
            this.showView=true;
        },
        openInfo(){
            this.views="基础信息"
            this.closes();
            this.showView2=true;
        },
        openBtn(){
            this.views="按钮信息"
            this.closes();
            this.showView3=true;
        },
        openView(){
            this.view="界面信息"
            this.closes();
            this.showView4=true;
        },
        openRead(){
            this.view="读取后台"
            this.closes();
            this.showView5=true;
        },
        closes(){
            this.showView=false;
            this.showView2=false;
            this.showView3=false;
            this.showView4=false;
            this.showView5=false;
            this.showViewChild2=false;
            this.showViewChild3=false;
            this.showViewChild=false;
            this.showBtnChild=false;
            this.showViewChild4=true;
            this.showViewChild5=false;
            this.showViewChild6=false;
            this.showViewChild7=false;
            this.showViewChild8=false;
        },
        returnView(){
            this.showViewChild2=false;
            this.showViewChild4=true;
        },
        returnView2(){
            this.showViewChild3=false;
            this.showViewChild2=true;
        },
        btnRowSort(list){
            this.data.main.view.buttonFields=list;
            this.btnTable.data= this.data.main.view.buttonFields;
            console.log(this.data,"btnRowsORT-------------------------------")
        },
        btnEdit(val){
            this.showBtnChild=false;
            this.btnFormOpts.btnInfo.opts.formData=val;
            this.btnShowData=val.condition;
            this.btnMsgShowData=val.condition2
            this.btnPrintData=val.menu
            this.showBtnChild=true;
        },
        btnDel(val){
            let indexs=-1;
            this.data.main.view.buttonFields.forEach((item,index)=>{
                if(JSON.stringify(val)==JSON.stringify(item)){
                    indexs=index;
                }
            })
            if(indexs>=0){
                this.data.main.view.buttonFields.splice(indexs,1)
            }
        },
        addBtnShowRow(){
            this.btnShowData.push({
                key:"",
                opr:"",
                val:""
            })
        },
        delBtnShowRow(index){
            this.btnShowData.splice(index,1)
        },
        addBtnMsgShowRow(){
            this.btnMsgShowData.push({
                key:"",
                opr:"",
                val:""
            })
        },
        delBtnMsgShowRow(index){
            this.btnMsgShowData.splice(index,1)
        },
        addBtnPrintRow(){
            this.btnPrintData.push({
                name:"",
                printKey:"",
                exkey:""
            })
        },
        delBtnPrintRow(index){
            this.btnPrintData.splice(index,1)
        },

        viewRowSort(list){
            this.data.main.view.view=list;
            this.viewTable.data= this.data.main.view.view;
            console.log(this.data,"btnRowsORT-------------------------------")
        },
        viewEdit(val){
            this.viewDetailTable.data=[];
            this.showViewChild=false;
            this.showViewChild2=false;
            this.showViewChild3=false;
            this.viewFormOpts.viewInfo.opts.formData=val
            this.viewDetailTable.data=val.list;
            this.showViewChild=true;
            window.setTimeout(()=>{
                
            },500)
           
           
        },
        viewDel(val){
            let indexs=-1;
            this.data.main.view.tabFields.forEach((item,index)=>{
                if(JSON.stringify(val)==JSON.stringify(item)){
                    indexs=index;
                }
            })
            if(indexs>=0){
                this.data.main.view.tabFields.splice(indexs,1)
            }
        },

        viewDetailRowSort(list){
            this.viewDetailTable.data=list;
            console.log(this.data,"viewDetailRowSort-------------------------------")
        },
        addViewDetail(){
            let rows={};
            this.viewDetailTableColumns.forEach(item=>{
                rows[item.prop]="";
            })
            this.viewDetailTable.data.push(rows)
        },


        viewDetailRowSort2(list){
            this.viewDetailTable2.data=list;
            console.log(this.data,"viewDetailRowSort2-------------------------------")
        },
        viewDetailEdit(val){
            console.log(val,"vals==============")
           this.showViewChild2=false;
           this.showViewChild4=false;
           window.setTimeout(()=>{
             let path=val.path;

             this.viewFormOptsFormData=val;
             this.viewFormOpts2.viewInfoEdit.opts.formData=val
             if(!this.data[path]){
                 this.data[path]=[]
             }
             this.viewDetailId=path;
             this.viewDetailTable2.data=this.data[path]
             this.viewFormOptsFormData2=this.data[path]
             this.showViewChild2=true;
           },200)
        },
        viewDetailDel(val){
            let indexs=-1;
            this.viewDetailTable.data.forEach((item,index)=>{
                if(JSON.stringify(item)==JSON.stringify(val)){
                    indexs=index;
                }
            })
            if(indexs>=0){
                this.viewDetailTable.data.splice(indexs,1)
            }
        },
        addViewDetail2(){
            let rows={};
            this.viewDetailTableColumns2.forEach(item=>{
                rows[item.prop]="";
            })
            this.viewDetailTable2.data.push(rows)
        },
        viewDetailEdit2(val){
            console.log(val,"vals==============")
           this.showViewChild3=false;
           window.setTimeout(()=>{
             
             this.viewFormFieldOpts.viewInfoField.opts.formData=val
             this.showViewChild3=true;
           },200)
        },
        viewDetailDel2(val){
            let indexs=-1;
            this.viewDetailTable2.data.forEach((item,index)=>{
                if(JSON.stringify(item)==JSON.stringify(val)){
                    indexs=index;
                }
            })
            if(indexs>=0){
                this.viewDetailTable2.data.splice(indexs,1)
            }
        },

        readRowSort(list){
            this.data.main.read=list;
            this.readTable.data= this.data.main.read;
            console.log(this.data,"readRowSort-------------------------------")
        },
        readEdit(val){
            this.readFormOpts.readInfo.opts.formData=val
            this.readSqlTable.data=val.data;
            this.showViewChild5=false;
            this.showViewChild6=false;
            this.showViewChild7=false;
            this.showViewChild8=false;
            window.setTimeout(()=>{
                this.showViewChild5=true;
            },200)
           
        },
        readlDel(val){
            console.log(val,"删除sql==================")
            let index_=-1;
            this.readTable.data.forEach((item,index)=>{
                if(JSON.stringify(val)==JSON.stringify(item)){
                    index_=index;
                }
            })
            if(index_>=0){
                this.readTable.data.splice(index_,1)
            }
        },
        readSqlEdit(val){
            this.readSqlFormOpts.readSqlInfo.opts.formData=val
            this.showViewChild6=true;
            this.showViewChild7=false;
            this.showViewChild8=false;
        },
        readEdit2(){
            let path=this.readSqlFormOpts.readSqlInfo.opts.formData.path;
            this.readSqlTable2.data=this.data[path];
            console.log(this.data[path],"path==========================="+path)
            console.log(this.data,"path===========================")
            this.showViewChild7=true;
            this.showViewChild8=false;
        },
        readSqlEdit2(val){
            this.readFormOpts2.readFieldInfo.opts.formData=val
            this.showViewChild8=true;
        },
        btnShowDel(val){

        },
        loadJson(){
            this.$post("api","/api/maintain/getViewJson",{"path":"/"+this.company+"/view/"+this.filepath+"/主界面.json",root:""}).then(data=>{
                this.data=data;
                this.mainInfo=[];
                for(let key in data){
                    this.mainInfo.push(key)
                }
                this.formOpts.mainInfo.opts.formData.mainPath="/"+this.company+"/view/"+this.filepath+"/主界面.json"
                for(let key in this.formOpts.mainInfo.opts.formData){
                  
                    if(this.data.main[key]){
                       
                        this.formOpts.mainInfo.opts.formData[key]=this.data.main[key]
                    }
                }
                this.btnTable.data=this.data.main.view.buttonFields;
                this.viewTable.data=this.data.main.view.tabFields;
                this.readTable.data=this.data.main.read;
                console.log(this.btnTable,"this.btnTable=============")
                
            })
        },
        resetDevOps(){

        }
    },
    watch:{
        filepath(val){
            this.loadJson();
        },
        viewFormOptsFormData:{
            deep:true,
            handler:function(newV,oldV){
                let path=this.viewFormOptsFormData.path;
                if(path!=this.viewDetailId){
                    if(this.data[this.viewDetailId])
                        delete this.data[this.viewDetailId]
                    this.data[path]=this.viewFormOptsFormData2
                    this.viewDetailId=path;
                }
                console.log(this.data,"newV=========================")
            }
        }
    }
}
</script>
<style>
    .editDev{
        width:100%;
        height:100%;
        border-left:1px solid #ddd;
        display:flex;
        flex-direction:column;
    }
    .dev_btns{
        display:flex;
        flex-direction:row;
        padding:5px;
        border-bottom:1px solid #ddd;
    }
    .dev_content{
        flex:1;
    }
    .showBtnTable{
        margin:10px;
        box-sizing:border-box;
        border:1px solid #ddd;
        background:#fff;
    }
    .showBtnTableTitle{
        padding:10px;
        background:#409EFF;
        color:#fff;
    }
    .showBtnTable td{
        border:1px solid #ddd;
        padding:5px;
    }
    .showBtnTable input[type='button']{
        background:#409EFF;
        border:1px solid #409EFF;;
        color:#fff;
        padding-left:5px;
        padding-right:5px;
        cursor:pointer;
    }
</style>